<template>
  <view class="container">
    <!-- 顶部 搜索 banner -->
    <view>
      <u-navbar
        backIconColor="#fff"
        :is-back="true"
        :background="background"
        :border-bottom="false"
        title-color="#fff"
      >
      </u-navbar>
      <view class="" style="position: relative">
        <view
          class="contentBg"
          :style="{
            paddingTop: `${statusBarHeight + navbarHeight}px`,
            backgroundImage: `url(${getImageUrl('svip-bg.png')})`,
            height: `${140 + statusBarHeight}px`,
            top: `-${statusBarHeight + navbarHeight}px`
          }"
        >
        </view>
      </view>
      <view class="content">
        <view class="top dis-flex flex-y-between flex-y-center">
          <view class="t-l dis-flex">
            <u-avatar :src="userInfo.avatar" size="120"></u-avatar>
            <view class="u-info">
              <view>{{ userInfo.nickname }}</view>
              <view class="id">开通会员，享专属权益</view>
            </view>
          </view>
          <view class="t-r" v-if="!memberCar || !memberCar.valid"> 未开通</view>
          <view class="t-r yet-follow" v-else> 已开通</view>
          <view class="yet-open" v-if="memberCar && memberCar.valid"
            >{{ $u.timeFormat(memberCar.expireTime, 'yyyy-mm-dd') }} 到期
          </view>
        </view>

        <view class="card">
          <view class="c-tl">请选择会员类型</view>
          <view class="svip-list dis-flex flex-y-center flex-y-between">
            <view
              class="svip-item"
              :class="checkSvipIndex == i ? 'checked' : ''"
              v-for="(svip, i) in svipList"
              :key="i"
              @click="checkSvip(i)"
            >
              <view class="tl">{{ svip.name }}</view>
              <view class="price">¥{{ (svip.price * 0.01).toFixed(2) }}</view>
              <view class="line-price" v-if="svip.linePrice"
                >¥{{ (svip.linePrice * 0.01).toFixed(2) }}
              </view>
              <view class="points">赠{{ svip.givePoint }}积分</view>
            </view>
          </view>
        </view>
        <view class="card qy">
          <view class="c-tl">会员尊享权益</view>
          <view class="qy-list dis-flex flex-y-center flex-y-between">
            <view class="qy-item" v-for="(qy, i) in qyList" :key="i">
              <u-icon :name="qy.iconUrl" size="101"></u-icon>
              <view class="tl">{{ qy.name }}</view>
            </view>
          </view>
        </view>

        <view class="floor-tip dis-flex flex-y-center">
          <view @click="checked = !checked">
            <u-icon
              :name="checked ? '/static/selected.png' : '/static/unselect.png'"
              size="35"
              class="icon"
            ></u-icon>
          </view>
          <text>我已阅读并同意</text>
          <text
            style="color: #10a28f"
            @click="routeTo('/universal/webcontent/webcontent?key=member_vip_agreement')"
            >《会员用户协议》
          </text>
        </view>
        <view v-if="memberCar && memberCar.valid" @click="renewOrder()" class="submit-btn">
          立即续费
        </view>
        <view v-else @click="createOrder()" class="submit-btn"> 立即开通</view>
      </view>
    </view>
    <PayPopup ref="payPopupRef" @close="closePay">
      <p style="font-size: 50rpx; font-weight: 600; padding: 20rpx; text-align: center">
        ¥{{ payPrice }}
      </p>
    </PayPopup>
  </view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
import PayPopup from '@/components/PayPopup'

export default {
  components: {
    PayPopup
  },
  data() {
    return {
      userInfo: {},
      returnPage: null,
      payOrderId: 0,
      checked: true,
      checkSvipIndex: 0,
      svipList: [],
      qyList: [],
      background: {
        background: 'transparent'
      },
      background1: {
        background: '#10A28F'
      },
      imgStyle: {
        width: '12rem'
      },
      statusBarHeight: systemInfo.statusBarHeight,
      memberCar: null,
      payPrice: 0
    }
  },
  onLoad(options) {
    this.userInfo = uni.getStorageSync('userInfo')
    this.returnPage = decodeURIComponent(options.returnPage || '')
    this.getPageData()
    this.$u.get('/app-api/member/vip/benefit').then((res) => {
      this.qyList = res.data
    })
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      return this.height ? this.height : height
      // #endif
    }
  },
  methods: {
    getPageData() {
      this.$u.get('/app-api/member/vip/my', { cards: 3 }).then((res) => {
        this.memberCar = res.data
        this.svipList = res.data.cards
      })
    },
    checkSvip(index) {
      this.checkSvipIndex = index
    },
    renewOrder() {
      uni.dialog.confirm(
        '续费提示',
        '已经是会员了，' +
          this.$u.timeFormat(this.memberCar?.expireTime, 'yyyy-mm-dd') +
          ' 到期，是否仍要续费？',
        () => {
          this.createOrder()
        }
      )
    },
    createOrder() {
      const app = this
      let cardId = app.svipList[app.checkSvipIndex].id || 0
      if (!cardId) {
        app.$u.toast('未选中会员类型')
        return
      }
      app.$u.post('/app-api/member/vip-order/create', { cardId: cardId }).then((res) => {
        if (res.code === 0) {
          app.payOrderId = res.data.tradeNo
          app.payPrice = res.data.price
            ? (res.data.price * 0.01).toFixed(2)
            : (app.svipList[app.checkSvipIndex].price * 0.01).toFixed(2)
          this.$refs.payPopupRef.open(this.payOrderId, '', app.payPrice === 0, app.returnPage)
        } else {
          app.$u.toast(res.msg)
        }
      })
    },
    getNewUser() {
      const app = this
      app.$u.api.getUserInfo().then((res) => {
        app.userInfo = res.data
        uni.setStorageSync('userInfo', res.data)
      })
    },
    closePay() {
      this.$u.post('/app-api/pay/order/close?tradeNo=' + this.payOrderId)
      this.getPageData()
      this.getNewUser()
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.popup-box {
  width: 100%;
  height: 100%;
  padding: 20rpx;
}

.floor-tip {
  display: flex;
  align-items: center;
  // padding: 20rpx;
  font-size: 28rpx;
  color: #333333;
  margin: 35rpx 0;
  position: relative;

  .icon {
    position: relative;
    margin-right: 20rpx;
    top: 6rpx;
  }
}

.submit-btn {
  width: 100%;
  height: 98rpx;
  line-height: 98rpx;
  text-align: center;
  background: #10a28f;
  box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(14, 143, 126, 0.3);
  border-radius: 49rpx;
  font-weight: bold;
  font-size: 36rpx;
  color: #ffffff;
}

.container {
  background-color: rgb(248, 248, 248);
  height: 100vh;
}

.contentBg {
  width: 100%;
  position: absolute;
  top: 0px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}

.content {
  position: relative;
  padding: 0 20rpx;

  .top {
    padding: 40rpx 20rpx;
    margin-top: 80rpx;
    height: 200rpx;
    background: #ffffff;
    border-radius: 20rpx;
    position: relative;

    .yet-open {
      position: absolute;
      font-size: 24rpx;
      color: #ff6f10;
      top: 160rpx;
      left: 160rpx;
    }

    .u-info {
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      padding: 12rpx 20rpx;
      font-size: 36rpx;

      .id {
        font-size: 24rpx;
        color: #999999;
      }
    }

    .t-r {
      width: 120rpx;
      height: 48rpx;
      border-radius: 24rpx;
      border: 1px solid #fa453c;
      font-size: 24rpx;
      color: #fa453c;
      line-height: 48rpx;
      text-align: center;
      box-sizing: border-box;
    }
  }
}

.card {
  width: 100%;
  height: 420rpx;
  background: #ffffff;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-top: 20rpx;

  .c-tl {
    font-weight: 500;
    font-size: 30rpx;
    color: #333333;
    margin-bottom: 40rpx;
  }
}

.qy {
  height: 280rpx;
}

.svip-list {
  .svip-item {
    width: 200rpx;
    height: 280rpx;
    border-radius: 10rpx;
    text-align: center;
    background: #f5f5f5;
    padding: 20rpx 0 30rpx 0;

    .title {
      font-size: 30rpx;
      color: #333333;
    }

    .price {
      font-size: 36rpx;
      color: #fa453c;
      margin-top: 40rpx;
    }

    .line-price {
      color: #999999;
      font-size: 30rpx;
      text-decoration: line-through;
    }

    .points {
      width: 128rpx;
      height: 44rpx;
      line-height: 44rpx;
      margin: 20rpx auto;
      background: #cccccc;
      border-radius: 22rpx;
      font-size: 22rpx;
      color: #ffffff;
    }
  }

  .checked {
    background: #d7f5f1;
    border: 1px solid #10a28f;
    box-sizing: border-box;

    .points {
      background: #fbc258;
    }
  }
}

.qy-list {
  .qy-item {
    text-align: center;

    .tl {
      font-size: 22rpx;
      color: #333333;
    }
  }
}

.mr-20 {
  margin-right: 40rpx;
}

.yet-follow {
  border: 1px solid #999999 !important;
  color: #999999 !important;
}
</style>
